// vite 内置 postcss 无需安装
import { Plugin } from "postcss"

const Options = {
  viewportWidth: 375, // UI设计稿的宽度
  unitPrecision: 2, // 单位精度
  viewportUnit: 'vmin', // 指定需要转换成的视窗单位
  // selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类
  // minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
}

interface IOptions {
  viewportWidth?: number
  unitPrecision?: number
  viewportUnit?: string
  // selectorBlackList?: string[]
  // minPixelValue?: number
}

export const PostCssPxToViewport = (options: IOptions = Options): Plugin => {
  const opt = { ...Options, ...options }

  return {
    postcssPlugin: "postcss-px-to-viewport",
    // 钩子函数
    Declaration(decl) {
      // px(vpx是自定义像素单位名) 转换成 vmin
      if (decl.value.includes('vpx')) {
        const num = parseFloat(decl.value)
        decl.value = `${(num / opt.viewportWidth * 100).toFixed(opt.unitPrecision)}${opt.viewportUnit}`
      }
    }
  }
}